import Link from "next/link";
import { getDictionary, type Locale } from "@/lib/site-content";

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dictionary = getDictionary(locale as Locale);

  return (
    <div className="page-stack">
      <section className="hero-panel">
        <div className="hero-copy">
          <div className="eyebrow">{dictionary.home.tag}</div>
          <h1>{dictionary.home.title}</h1>
          <p className="hero-description">{dictionary.home.subtitle}</p>
          <div className="hero-actions">
            <Link className="button button-dark" href={`/${locale}/login`}>
              {dictionary.home.primaryCta}
            </Link>
            <Link className="button button-light" href={`/${locale}/docs`}>
              {dictionary.home.secondaryCta}
            </Link>
          </div>
          <div className="hero-proof">
            <span>{dictionary.home.freeTrial}</span>
            <span>{dictionary.home.socialProof}</span>
          </div>
        </div>
        <div className="hero-stage">
          <div className="stage-card stage-card-primary">
            <div className="stage-label">{dictionary.home.stageLabel}</div>
            <div className="stage-stat">{dictionary.home.stageValue}</div>
            <p>{dictionary.home.stageDescription}</p>
          </div>
          <div className="stage-card">
            <div className="stage-mini-grid">
              {dictionary.home.heroPhrases.map((phrase) => (
                <span key={phrase}>{phrase}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section-panel">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.home.scenesTag}</div>
          <h2>{dictionary.home.scenesTitle}</h2>
          <p>{dictionary.home.scenesSubtitle}</p>
        </div>
        <div className="card-grid card-grid-three">
          {dictionary.home.scenes.map((scene) => (
            <article className="feature-card" key={scene.name}>
              <span className="card-kicker">{scene.category}</span>
              <h3>{scene.name}</h3>
              <p>{scene.description}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section-panel section-panel-accent">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.home.flowTag}</div>
          <h2>{dictionary.home.flowTitle}</h2>
          <p>{dictionary.home.flowSubtitle}</p>
        </div>
        <div className="steps-grid">
          {dictionary.home.flowSteps.map((step, index) => (
            <article className="step-card" key={step.title}>
              <div className="step-number">0{index + 1}</div>
              <h3>{step.title}</h3>
              <p>{step.description}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section-panel">
        <div className="section-heading">
          <div className="eyebrow">{dictionary.home.trustTag}</div>
          <h2>{dictionary.home.trustTitle}</h2>
        </div>
        <div className="stats-grid">
          {dictionary.home.trustStats.map((stat) => (
            <article className="stat-card" key={stat.label}>
              <strong>{stat.value}</strong>
              <span>{stat.label}</span>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}